<template>
  <div>
    <div class="edit box">
      <p>
        <i class="icon-bitian iconfont"></i>系统名称
        <el-input
          v-model="name"
          placeholder="请输入系统名称"
          size="normal"
          maxlength="30"
          @input="ifChange"
        ></el-input>
      </p>
      <p>
        <i class="icon-bitian iconfont"></i>所属租户
        <el-select
          v-model="tenantId"
          placeholder="请选择系统所属租户"
          size="normal"
          @change="ifChange"
        >
          <el-option
            v-for="item in tenantList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
      <p>
        <i class="icon-bitian iconfont"></i>存储配置
        <el-select
          v-model="storageId"
          placeholder="请选择系统存储配置"
          size="normal"
          @change="ifChange"
        >
          <el-option
            v-for="item in storageList"
            :key="item.id"
            :label="item.storageName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </p>
      <p>
        &#12288;&#12288;&#12288;状态
        <el-switch
          v-model="status"
          active-color="#1e9ffe"
          inactive-color="#BFBFBF"
          active-value="start"
          inactive-value="stop"
          @change="ifChange"
          :width="56"
          :class="{ 'switch-is-actived': status === 'start' }"
        >
        </el-switch>
      </p>
      <p>
        &#12288;&#12288;&#12288;备注
        <el-input
          size="normal"
          type="textarea"
          maxlength="100"
          @input="ifChange"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入备注内容"
          v-model="remarks"
          resize="none"
        >
        </el-input>
      </p>
      <p>
        <el-button type="primary" round size="normal" @click="editSystem()"
          >确认</el-button
        >
        <el-button
          round
          size="normal"
          @click="() => {$router.push('/configManage/systemSetting')}"
          >取消</el-button
        >
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "edit",
  data() {
    return {
      isChange:false,
      isSubmit:false,
      name: "",
      storageId: "",
      storageName: "",
      tenantId: "",
      tenantName: "",
      status: "",
      remarks: "",
      tenantList: [],
      storageList: [],
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getSys();
    this.getTenantSelect();
    this.getStorageSelect();
  },
  // 路由离开守卫
  beforeRouteLeave(to , from , next){
    // 如果已提交或未修改 则可以离开
    if(this.isSubmit || !this.isChange){
      next();
    }else{
      // 如果已修改或未提交 则弹窗提示
      this.changeTips();
      next(false);
    }
  },
  methods: {
    // 检测改变
    ifChange(){
      this.isChange =true;
    },
     // 修改提醒
    changeTips() {
      this.$confirm('检测到未提交的内容，是否在离开页面前提交修改？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '提交',
        cancelButtonText: '放弃修改'
      })
          .then(() => {
            // 进行提交
            this.editSystem();
          })
          .catch(action => {
            // 如何是选择放弃保存并离开页面
            if(action === 'cancel'){
              this.isChange = false;
              this.$router.push('/configManage/systemSetting');
            }
            this.$message({
              type: 'info',
              message: action === 'cancel'
                  ? '放弃提交并离开页面'
                  : '停留在当前页面'
            })
          });
    },
    // 获取系统信息
    getSys() {
      this.$Http.viewSystemList({
          id: this.id,
        })
        .then((res) => {
          (this.name = res.data.name),
            (this.storageId = res.data.storageId),
            (this.tenantId = res.data.tenantId),
            (this.tenantName = res.data.tenantName),
            (this.storageName = res.data.storageName),
            (this.status = res.data.status),
            (this.remarks = res.data.remarks);
        });
    },
    // 获取租户下拉菜单
    getTenantSelect() {
      this.$Http.tenentNameList({}).then((res) => {
        this.tenantList = res.data;
      });
    },
    // 获取存储配置下拉菜单
    getStorageSelect() {
      this.$Http.storageNameList({}).then((res) => {
        this.storageList = res.data;
      });
    },
    // 提交编辑信息
    editSystem() {
      if (this.name !== "") {
        this.$Http
          .editSystemList({
            id: this.id,
            name: this.name,
            tenantId: this.tenantId,
            storageId: this.storageId,
            remarks: this.remarks,
            status: this.status,
          })
          .then((res) => {
            if (res.code !== "SUCCESS") {
              return this.$message({
                type: "error",
                message: res.message,
              });
            } else {
              this.isSubmit = true;
              this.$router.push('/configManage/systemSetting');
              return this.$message({
                type: "success",
                message: "系统信息更新成功!",
              });
            }
          });
      } else {
        return this.$message({
          type: "info",
          message: "系统名称不可为空!",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "src/assets/css/content.scss";
</style>
